<template>
  <div class="wrapper">
    <div class="content">
      <Issue v-if="showPage[0] == 1" />
      <Order v-if="showPage[1] == 1" />
      <Cord v-else-if="showPage[2] == 1" />
      <Mine v-else-if="showPage[3] == 1" />
    </div>

    <div class="nav">
      <div class="nav-item">
        <i class="iconfont icon-dating close" :class="{ show_class: showPage[0] == 1 }" @click=" go(0)"
          style="font-size: 24px;"></i><br>
        <div class="close" :class="{ show_class: showPage[0] == 1 }">兼职</div>
      </div>
      <div class="nav-item">
        <i class="iconfont icon-yuyue close" :class="{ show_class: showPage[1] == 1 }" @click=" go(1)"
          style="font-size: 24px;"></i><br>
        <div class="close" :class="{ show_class: showPage[1] == 1 }">任务</div>
      </div>
      <div class="nav-item">
        <i class="iconfont icon-dingdan close" :class="{ show_class: showPage[2] == 1 }" @click=" go(2)"
          style="font-size: 22px;"></i><br>
        <div class="close" :class="{ show_class: showPage[2] == 1 }">记录</div>
      </div>
      <div class="nav-item">
        <i class="iconfont icon-wode1 close" :class="{ show_class: showPage[3] == 1 }" @click=" go(3)"
          style="font-size: 32px;"></i><br>
        <div class="close" :class="{ show_class: showPage[3] == 1 }">我的</div>
      </div>
    </div>
    <audio ref="audioPlayer" :src="audioSrc" preload="auto" style="display: none;"></audio>
    <router-view v-slot="{ Component }">
      <transition name="slide-left">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<script>
import Issue from './view/tutor/Issue.vue';
import Order from './view/tutor/Order.vue';
import Cord from './view/tutor/Cord.vue';
import Mine from './view/tutor/Mine.vue';
import emitter from './bus';
import axios from 'axios';
import settings from './settings.json';
import dogShot from './assets/audio/audio_2fe49714e4.mp3';
import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from '@tauri-apps/plugin-notification';
export default {
  components: {
    Issue,
    Order,
    Cord,
    Mine
  },
  data() {
    return {
      navList: [0, 0, 0, 0, 0],
      showPage: [1, 0, 0, 0],
      audioSrc: dogShot,
      ipAddr: '',

    };
  },
  created() {
    let user = JSON.parse(localStorage.getItem('currentUser'))
    console.log(user);
    if (user == null) {
      this.$router.push('/login')
    } else {
      this.login(user)
    }
    this.ipAddr = settings.ipAddress



    // this.autoLogin(user.username, user.password)
    emitter.on('playAudio', (e) => {
      alert('playAudio')
      this.$refs.audioPlayer.play()
      console.dir(this.$refs.audioPlayer)
    })
  },
  mounted() {

  },
  methods: {
    login(user) {
      axios.post(`${settings.ipAddress}/login`, {
        username: user.username,
        password: user.password,
      }).then(res => {
        let user = res.data.userInfo
        console.log(res.data);


        if (res.data.msg == 'ok') {

          this.$router.push('/')
          let user = res.data.userInfo
          user.password = this.$refs.password.value

          localStorage.setItem("currentUser",
            JSON.stringify(user)
          )
        } else {
          this.$router.push('/login')
          alert("登录失败")
        }
      })
    },
    go_page(index) {
      // 、、、页面跳转
      this.navList[index] = 1
      this.close_other_page(index)
      switch (index) {
        case 0:
          this.$router.push("/")
          break;
        case 1:
          this.$router.push("/ordert")
          break;
        case 2:
          this.$router.push("/cordt")
          break;
        case 3:
          this.$router.push("/minet")
          break;
        case 4:
          this.$router.push("/addresst")
          break;
        case 5:
          this.$router.push("/feedbackt")
          break;
        case 6:
          this.$router.push("/aboutt")
          break;
        case 7:
          this.$router.push("/reportt")
          break;
      }
    },
    close_other_page(index) {
      for (let i = 0; i < this.navList.length; i++) {
        if (i !== index) {
          this.navList[i] = 0;
        }
      }
    },
    go(index) {
      this.showPage[index] = 1;
      this.showPage.forEach((v, k) => {
        if (k != index) {
          this.showPage[k] = 0;
        }
      })
      console.log(this.showPage);

    },
    autoLogin(username, password) {
      axios.get(`${this.ipAddr}/user/loginVerify`, {
        params: {
          username: username,
          password: password
        }
      }
      ).then((res) => {
        if (res.data != null) {

        } else {
          alert("登录失败")
          this.$router.push("/login")
        }
      }).catch(error => {
        console.log(error)
        alert("登录失败----")
      })
    },
  }
}


</script>



<style lang="scss" scoped>
// 路由组件的动画效果
/* 进入动画 */
.slide-left-enter-active {
  transition: all 0.3s ease-out;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/* 离开动画 */
.slide-left-leave-active {
  transition: all 0.3s ease-out;
}

.slide-left-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.flip-box {
  width: 200px;
  height: 200px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  .content {
    width: fit-content;
    height: fit-content;
  }

  .nav {
    width: 100vw;
    height: 59px;
    border-top: 1px solid #ebeaea;
    position: fixed;
    top: calc(100vh - 60px);
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .nav-item {


      text-align: center;

      color: rgb(0, 0, 0);

      .close {
        color: #9b9a9a;
      }

      .show_class {
        color: #ffa600;
      }

      letter-spacing: 1px;



      i {
        color: #ffffff;
      }

      div {
        text-align: center;
        font-size: 10px;
        color: #ffffff;
        height: 14px;
        line-height: 14px;
      }
    }
  }

}
</style>